<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>AI 交互控制端</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="enhanced-styles.css">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/livekit-client@2.5.0/dist/livekit-client.umd.min.js"></script>
</head>
<body>
  <div id="app" style="display: none;">
    <!-- 主内容区域 -->
    <main class="content-area">
      <!-- 流程控制面板 -->
      <section id="flow-tab" class="tab-content" role="tabpanel" aria-labelledby="flow-tab-btn">
        <header class="section-header">
          <h2 class="section-title">🚀 流程控制</h2>
          <div class="status-indicator">
            <span class="status-dot"></span>
            <span class="status-text">就绪</span>
          </div>
        </header>
        <div class="flow-list" id="flowList">
          <!-- 动态加载流程列表 -->
        </div>
      </section>

      <!-- 智能对话面板 -->
      <section id="chat-tab" class="tab-content chat-container" role="tabpanel" aria-labelledby="chat-tab-btn" style="display: none;">
        <header class="chat-header">
          <div class="chat-title-group">
            <h2 class="section-title">💬 智能对话</h2>
            <div class="chat-status">
              <div class="connection-status">
                <span class="connection-dot online"></span>
                <span class="connection-text">已连接</span>
              </div>
              <span class="typing-indicator" style="display: none;">
                <span class="typing-dots">
                  <span></span>
                  <span></span>
                  <span></span>
                </span>
                AI正在思考...
              </span>
            </div>
          </div>
          <div class="chat-actions">
            <button id="clearChatBtn" class="action-btn clear-btn" title="清空聊天记录">
              <span class="btn-icon">🗑️</span>
              <span class="btn-text">清空</span>
            </button>
          </div>
        </header>
        
        <!-- 聊天输入框移到顶部 -->
        <div class="chat-input-container">
          <div class="chat-input-area">
            <div class="input-wrapper">
              <textarea 
                id="messageInput"
                class="message-textarea"
                placeholder="输入您的消息..."
                maxlength="500"
                rows="1"
                autocomplete="off"
                aria-label="消息输入框"
              ></textarea>
              <div style="display: none;" class="input-actions">
                <div class="input-counter">
                  <span id="charCount">0</span>/500
                </div>
              </div>
            </div>
            <button id="sendBtn" class="send-btn" title="发送消息" disabled>
              <span class="btn-icon">
                <svg width="20" height="20" viewBox="0 0 24 24" fill="none">
                  <path d="M2 21L23 12L2 3V10L17 12L2 14V21Z" fill="currentColor"/>
                </svg>
              </span>
            </button>
          </div>
          
          <div class="quick-actions">
            <button class="quick-btn" data-message="你好">👋 你好</button>
            <button class="quick-btn" data-message="介绍一下自己">🤖 自我介绍</button>
            <button class="quick-btn" data-message="帮我解答问题">❓ 解答问题</button>
          </div>
        </div>
        
        <!-- 聊天内容区域 -->
        <div class="chat-body">
          <div class="chat-messages" id="chatMessages" role="log" aria-live="polite">
            <div class="welcome-message">
              <div class="welcome-avatar">🤖</div>
              <div class="welcome-content">
                <h3>欢迎使用AI智能对话</h3>
                <p>我是您的AI助手，有什么可以帮助您的吗？</p>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <!-- 底部导航栏 -->
    <nav class="bottom-navigation" role="tablist">
      <div class="nav-container">
        <button class="nav-item" data-tab="flow" role="tab" id="flow-tab-btn" aria-controls="flow-tab" aria-selected="true">
          <div class="nav-icon-wrapper">
            <div class="nav-icon">⚡</div>
            <div class="nav-badge" id="flowBadge" style="display: none;">0</div>
          </div>
          <div class="nav-text">流程控制</div>
          <div class="nav-indicator"></div>
        </button>
        
        <!-- 中央语音交互按钮 -->
        <div class="mic-container">
          <button class="mic-button" id="micButton" title="长按进行语音交互" aria-label="语音交互按钮">
            <div class="mic-icon-wrapper">
              <div class="mic-icon">🎤</div>
              <div class="mic-pulse"></div>
            </div>
            <div class="mic-status-text">语音</div>
          </button>
          <div class="mic-waves">
            <div class="wave wave-1"></div>
            <div class="wave wave-2"></div>
            <div class="wave wave-3"></div>
          </div>
        </div>
        
        <button class="nav-item" data-tab="chat" role="tab" id="chat-tab-btn" aria-controls="chat-tab" aria-selected="false">
          <div class="nav-icon-wrapper">
            <div class="nav-icon">💬</div>
            <div class="nav-badge" id="chatBadge" style="display: none;">0</div>
          </div>
          <div class="nav-text">智能对话</div>
          <div class="nav-indicator"></div>
        </button>
      </div>
    </nav>
  </div>

  <!-- 连接状态提示 -->
  <div id="connecting" class="connecting" role="status" aria-live="polite">
    <div class="connecting-content">
      <div class="connecting-spinner"></div>
      <div class="connecting-text">
        <h3>正在建立连接</h3>
        <p>请稍候，正在连接到AI服务...</p>
      </div>
    </div>
    <div class="connecting-bg"></div>
  </div>

  <script src="enhanced-interactions.js"></script>
  <script type="module" src="app.js"></script>
</body>
</html>